import React from "react";
import {
  ButtonProps,
  Text,
  TextStyle,
  TouchableWithoutFeedbackProps,
  View,
  ViewStyle,
  TouchableWithoutFeedback,
  StyleSheet,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { p } from "utils/pxToDp";
import MTouchableOpacity from "../MTouchableOpacity";
import themeStore from "stores/theme";

const YButton: React.FC<
  {
    style?: ViewStyle;
    titleStyle?: TextStyle;
    isGradient?: boolean;
    title?: string;
    children?: React.ReactNode;
  } & TouchableWithoutFeedbackProps
> = ({ children, titleStyle, title, isGradient = true, style, ...rest }) => {
  const theme = themeStore.theme;
  return (
    <MTouchableOpacity style={styles.flex} {...rest}>
      {isGradient ? (
        <LinearGradient
          start={{ x: 0, y: 1 }}
          end={{ x: 1, y: 0 }}
          colors={[
            theme.gradienty1,
            theme.gradienty2,
            theme.gradienty3,
            theme.gradienty4,
          ]}
          style={[styles.flex, style]}
        >
          {children ? (
            children
          ) : (
            <Text style={[styles.text, { color: theme.btnColor }, titleStyle]}>
              {title}
            </Text>
          )}
        </LinearGradient>
      ) : (
        <View style={[styles.flex, style]}>
          <Text style={[styles.text, { color: theme.btnColor }, titleStyle]}>
            {title}
          </Text>
        </View>
      )}
    </MTouchableOpacity>
  );
};

export default YButton;

const styles = StyleSheet.create({
  flex: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    // borderWidth: 1,
    // borderColor: '#fff',
    paddingHorizontal: p(30),
    paddingVertical: p(10),
    borderRadius: p(40),
  },
  text: {
    // color: "#fff",
    fontSize: p(28),
    textAlign: "center",
  },
});
